<style>
.cppmv2-bg {
    position: relative;
}
.cppmv2-bg img {
    width: 100%;
}
.cppmv2-bubble-list {
    position: absolute;
    filter: grayscale(100%) brightness(90%);
    transition: all 0.5s ease-in-out;
}
.cppmv2-bubble-main {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
@media(min-width:768px){
.cppmv2-bubble-list:hover {
  filter: grayscale(0%) brightness(100%); 
  transform: translateY(-20px) scale(1.2);
}
}
@meida(max-width:768px){
    .cppmv2-bubble-list {
        zoom: 0.6;
    }
    .cppmv2-bubble-list {
        filter: grayscale(0%) brightness(100%); 
    }
}
</style>

<div class="collection-position-product-main">
    <div class="cppmv2-bg">
        <picture class="cppmv2-picture">
            <source srcset="{{section.settings.bg_mb | img_url: 'master'}}" media="(max-width: 768px)" />
            <img class="cppmv2-img" src="{{section.settings.bg_pc | img_url: 'master'}}">
        </picture>

        <div class="cppmv2-bubble-main">
            {% for block in section.blocks %}
                {% assign bubbleId = "cppmv2-bubble-"|append: block.id %}
                <style>
                    .cppmv2-bubble-list.{{ bubbleId }}{
                        left:{{block.settings.x_pc }}%;
                        top:{{block.settings.y_pc }}%;
                    }
                    @media(max-width:768px){
                        .cppmv2-bubble-list.{{ bubbleId }}{
                            left:{{block.settings.x_mb }}%;
                            top:{{block.settings.y_mb }}%;
                        }
                    }
                </style>
                <div class="cppmv2-bubble-list {{ bubbleId }}">
                    <a href="{{block.settings.link}}" class="cppmv2-bubble-link">
                        <img class="cppmv2-bubble-img" src="{{block.settings.product_image | img_url: 'master'}}">
                    </a>
                </div>
            {% endfor %}
        </div>
    </div>
</div>


{% schema %}
  {
    "name": "产品高亮模块",
    "class":"collection-position-product",
    "settings": [
        {
            "type": "text",
            "id": "title",
            "label": "标题"
        },
        {
            "type": "image_picker",
            "id": "bg_pc",
            "label": "背景图片 PC"
        },
        {
            "type": "image_picker",
            "id": "bg_mb",
            "label": "背景图片 MB"
        }
    ],
    "blocks": [
        {
        "type": "banner",
        "name": "筛选图片",
        "settings": [
            {
                "type": "image_picker",
                "id": "product_image",
                "label": "产品图片"
            },
            {
                "type": "url",
                "id": "link",
                "label": "产品链接"
            },
            {
                "type": "text",
                "id": "x_pc",
                "label": "PC 横向偏移"
            },
            {
                "type": "text",
                "id": "x_mb",
                "label": "MB 横向偏移"
            },
            {
                "type": "text",
                "id": "y_pc",
                "label": "PC 纵向偏移"
            },
            {
                "type": "text",
                "id": "y_mb",
                "label": "MB 纵向偏移"
            }

        ]
        }    
    ],
  "presets": [
    {
      "name": "v1 产品高亮模块"
    }
  ]
  }
{% endschema %}